<template>
  <div class="transportDetail">
    <div class="top">
      <div class="top_l">
        <div class="company">
          <img src="~@/assets/images/联系人@3x.png" class="logo" />
        </div>
        <div class="userinfo">
          <div>
            <span class="taskNumber">{{ detailParams.taskNumber }}</span>
            <i style="margin-left: 10px" type="primary" class="el-icon-copy-document" @click="copyTaskNumber" />
            <span class="taskStatus" :style="getStatusStyle(detailParams.taskStatus)">
              {{ getStatusText(detailParams.taskStatus) }}
            </span>
          </div>
          <div style="color: #aaaaaa">进厂时间：{{ detailParams.entryTime }}</div>
        </div>
      </div>

      <div class="top_r">
        <el-button v-if="detailParams.taskStatus === 1" type="primary" @click="auditWay">审核</el-button>
        <!-- <el-button type="primary" @click="setVehicle">车辆</el-button> -->
        <el-button
          v-if="
            detailParams.taskStatus === 1 ||
            detailParams.taskStatus === 2 ||
            detailParams.taskStatus === 3 ||
            detailParams.taskStatus === 5
          "
          type="primary"
          @click="update"
          >编辑</el-button
        >
        <el-button v-if="detailParams.taskStatus === 2" @click="accomplish">完成</el-button>
        <el-button v-if="detailParams.taskStatus === 1 || detailParams.taskStatus === 5" @click="cancel"
          >取消
        </el-button>
        <el-button @click="copyTaskNumber">复制</el-button>
      </div>
    </div>

    <div class="bottom">
      <el-tabs v-model="activeName" @tab-click="tabHandleClick">
        <el-tab-pane label="计划信息" name="0">
          <div>
            <div class="planData">
              <div class="info">
                <div class="data">
                  <div class="text">计划量</div>
                  <span class="figure">{{ detailParams.materialBo.plannedQuantity }}</span>
                  <span> 吨</span>
                </div>
                <div class="data">
                  <div class="text">需求车数</div>
                  <span class="figure">{{ detailParams.requiredTrucks }}</span>
                  <span> 辆</span>
                </div>
                <div class="data">
                  <div class="text">总趟次</div>
                  <span class="figure">{{ detailParams.logisticsPlanVo.totalTrips }}</span>
                  <span> 趟 (1趟/车)</span>
                </div>
                <div class="data">
                  <div class="text">物流公司</div>
                  <span class="figure">{{ detailParams.logisticsPlanVo.logisticsCompanies }}</span>
                  <span> 家</span>
                </div>
              </div>
              <div class="info">
                <div class="data">
                  <div class="text">分配量</div>
                  <span class="figure">{{ detailParams.requiredTrucks }}</span>
                  <span> 吨</span>
                </div>
                <div class="data">
                  <div class="text">已完成量</div>
                  <span class="figure">{{ detailParams.completedQuantity }}</span>
                  <span> 吨</span>
                </div>
                <div class="data">
                  <div class="text">未完成量</div>
                  <span class="figure">{{ detailParams.remainingQuantity }}</span>
                  <span> 吨</span>
                </div>
                <div class="data">
                  <div class="text">已完成趟次</div>
                  <span class="figure">{{}}</span>
                  <span> 趟 (1趟/车)</span>
                </div>
              </div>
            </div>

            <p class="title">基础信息</p>
            <el-row>
              <el-col span="6" class="mb20">供应商：{{ detailParams.supplierName }}</el-col>
              <el-col span="6" class="mb20">起点：{{ detailParams.startPointId }}</el-col>
              <el-col span="6" class="mb20">终点：{{ detailParams.endPointId }}</el-col>
              <el-col span="6" class="mb20">船名：{{ detailParams.shipName }}</el-col>
              <el-col span="6" class="mb20">车型：{{ detailParams.vehicleType }}</el-col>
            </el-row>
            <p class="title">物料信息</p>
            <!-- 物料信息 -->
            <LPTablePage
              ref="materialTablePage"
              :show-page="false"
              :show-index="true"
              :table-data="materialTableData"
              :table-column="materialTableColumn"
              align="left"
              :random-column-key="true"
            />
            <p class="title">审核信息</p>
            <!-- 审核信息 -->
            <LPTablePage
              ref="auditTablePage"
              :show-page="false"
              :show-index="true"
              :table-data="auditTableData"
              :table-column="auditTableColumn"
              align="left"
              :random-column-key="true"
            />
            <p class="title">系统信息</p>
            <el-row>
              <el-col span="6" class="mb20">操作时间：{{ detailParams.operationTime }}</el-col>
              <el-col span="6" class="mb20">操作人：{{ detailParams.operator }}</el-col>
              <el-col span="6" class="mb20">创建人：{{ detailParams.createBy }}</el-col>
              <el-col span="6" class="mb20">创建时间：{{ detailParams.createTime }}</el-col>
              <el-col span="6" class="mb20">创建来源：{{ detailParams.creationSource }}</el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分配物流" name="1">
          <p class="title">分配物流公司</p>
          <div class="record">
            <LPTablePage
              ref="logisticsCompanyTablePage"
              :show-index="true"
              :table-data="companyData"
              :table-column="companyTableColumn"
              align="left"
              :total="logisticsCompanyTotal"
              :current-page="logisticsCompanyCurrentPage"
              :random-column-key="true"
              @handleSizeChange="logisticsCompanyHandleSizeChange"
              @handleCurrentChange="logisticsCompanyHandleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="运单信息" name="2">
          <div class="waybillData">
            <div class="info">
              <div class="data">
                <div class="text">需求趟次</div>
                <span class="figure">1000.000</span>
                <span> 趟</span>
              </div>
              <div class="data">
                <div class="text">已完成趟次</div>
                <span class="figure">32</span>
                <span> 趟</span>
              </div>
            </div>
            <div class="info">
              <div class="data">
                <div class="text">未开卡</div>
                <span class="figure">1000.000</span>
                <span> 辆</span>
              </div>
              <div class="data">
                <div class="text">待进厂</div>
                <span class="figure">1000.000</span>
                <span> 辆</span>
              </div>
              <div class="data">
                <div class="text">厂内</div>
                <span class="figure">1000.000</span>
                <span> 辆</span>
              </div>
              <div class="data">
                <div class="text">已出厂</div>
                <span class="figure">16</span>
                <span> 辆</span>
              </div>
            </div>
          </div>
          <div style="background-color: #fff">
            <search-bar
              v-model="logisticsCompanySearchModel"
              :search-data="logisticsCompanySearchData"
              :config="logisticsCompanySearchData"
              @search="handleSearchSubmit"
              @searchReset="handleSearchReset"
            />
          </div>
          <div class="record">
            <LPTablePage
              ref="tablePage"
              :show-index="false"
              :table-data="waybillTableData"
              :table-column="waybillTableColumn"
              align="left"
              :total="total"
              :current-page="currentPage"
              :random-column-key="true"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="3">
          <div style="background-color: #fff; padding: 0 0.3rem">
            <search-bar
              v-model="searchModel"
              :search-data="searchData"
              :config="searchData"
              @search="handleSearchSubmit"
              @searchReset="handleSearchReset"
            />
          </div>
          <div class="record">
            <LPTablePage
              ref="tablePage"
              :show-index="false"
              :table-data="tableData"
              :table-column="tableColumn"
              align="left"
              :total="total"
              :current-page="currentPage"
              :random-column-key="true"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 审核 -->
    <base-dialog
      :visible="auditVisile"
      title="审核"
      width="640px"
      class="addDictDialog"
      @handleDialogSubmit="handleAuditSubmit"
      @handleDialogCancle="handleAuditCancle"
    >
      <el-form
        ref="auditParams"
        :model="auditParams"
        :rules="ruleRule"
        label-width="120px"
        class="dictForm"
        label-position="top"
        size="medium"
      >
        <el-row :gutter="50">
          <el-col :span="24">
            <el-form-item label="审核结果:" prop="auditStatus">
              <el-radio-group v-model="auditParams.auditStatus">
                <el-radio label="1">通过</el-radio>
                <el-radio label="2">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核说明:" prop="auditText">
              <el-input v-model.trim="auditParams.auditText" type="textarea" :rows="2" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
    <!-- 完成 -->
    <base-dialog
      :visible="accomplishVisile"
      title="完成运输计划"
      width="640px"
      class="addDictDialog"
      @handleDialogSubmit="handleAccomplishSubmit"
      @handleDialogCancle="handleAccomplishCancle"
    >
      <div class="text">确定要完成计划吗？</div>
      <div class="text" style="margin: 5px 0">计划完成后，运输中的运输单不受影响，可继续执行。</div>
      <div class="text" style="color: gray">
        计划量{{ detailParams.materialBo.plannedQuantity }}吨，已完成{{ detailParams.completedQuantity }}吨
      </div>
    </base-dialog>
  </div>
</template>

<script>
import LPTablePage from '@/components/LPTablePage'
import SearchBar from '@/components/SearchBar'
import baseDialog from '@/components/BaseDialog'
import ImagePreview from '@/components/ImagePreview'
import beiGangApi from '@/api/logistics/beigang'
export default {
  name: 'TransportDetail',
  components: {
    LPTablePage,
    SearchBar,
    baseDialog,
    ImagePreview
  },
  data() {
    return {
      auditList: [],
      accomplishVisile: false,
      vehicleVisile: false,
      addVisile: false,
      auditVisile: false,
      auditParams: {},
      dictModel: {},
      activeName: '0',
      searchModel: {},
      logisticsCompanySearchModel: {},
      companyData: [],
      auditTableData: [],
      materialTableData: [],
      waybillTableData: [],
      tableData: [],
      detailParams: {},

      imgurl: 'http://43.138.9.96:9000/ruoyi/2024/09/30/2d0d4f03fcbc47988fd60060532b68c4.png',
      total: 0,
      logisticsCompanyTotal: 0,

      currentPage: 1,
      logisticsCompanyCurrentPage: 1,
      logisticsCompanySearchData: [
        {
          placeholder: '运单状态',
          prop: 'userName',
          type: 'select',
          options: [
            { label: '成功', value: '0' },
            { label: '失败', value: '1' }
          ]
        },
        {
          placeholder: '运输单号',
          prop: 'aa'
        },
        {
          placeholder: '车牌号',
          prop: 'aa'
        },
        {
          placeholder: '司机姓名',
          prop: 'aa'
        },
        {
          prop: 'status',
          type: 'select',
          placeholder: '物流公司',
          options: [
            { label: '成功', value: '0' },
            { label: '失败', value: '1' }
          ]
        },
        {
          label: '创建时间',
          prop: 'loginTime',
          type: 'datetimerange',
          startPlaceholder: '起始时间',
          endPlaceholder: '结束时间'
        },
        {
          prop: 'search',
          type: 'button'
          // policy: ['system.log.query'],
        }
      ],
      searchData: [
        { placeholder: '操作', prop: 'ipaddr' },
        { placeholder: '操作事件', prop: 'userName' },
        { placeholder: '操作人', prop: 'aa' },
        {
          label: '操作时间',
          prop: 'loginTime',
          type: 'datetimerange',
          startPlaceholder: '起始时间',
          endPlaceholder: '结束时间'
        },
        {
          prop: 'search',
          type: 'button'
          // policy: ['system.log.query'],
        }
      ],
      materialTableColumn: [
        { label: '物料类型', prop: 'materialType' },
        { label: '物料编号', prop: 'materialCode' },
        { label: '物料描述', prop: 'materialDescription' },
        { label: '单位', prop: 'unit' },
        { label: '计划量(吨)', prop: 'plannedQuantity' },
        { label: '分配量(吨)', prop: 'ipaddr' },
        { label: '已完成量(吨)', prop: 'completedQuantity' },
        { label: '未完成量(吨)', prop: 'remainingQuantity' }
      ],
      auditTableColumn: [
        { label: '操作事件', prop: 'status' },
        { label: '审核时间', prop: 'auditTime' },
        { label: '审核人', prop: 'auditor' },
        { label: '审核结果', prop: 'auditResult' },
        { label: '审核说明', prop: 'auditDescription' }
      ],
      companyTableColumn: [
        { label: '物流公司', prop: 'infoId' },
        { label: '物流单号', prop: 'userName' },
        { label: '单据状态', prop: 'ipaddr' },
        { label: '分配量(吨)', prop: 'ipaddr' },
        { label: '已完成量(吨)', prop: 'ipaddr' },
        { label: '未完成量(吨)', prop: 'ipaddr' },
        { label: '分配车数(辆)', prop: 'ipaddr' },
        { label: '分配趟次(趟)', prop: 'ipaddr' },
        { label: '已完成趟次', prop: 'ipaddr' },
        { label: '派车方案', prop: 'ipaddr' }
      ],
      waybillTableColumn: [
        { label: '运输单号', prop: 'infoId' },
        { label: '单据状态', prop: 'userName' },
        { label: '车牌号', prop: 'ipaddr' },
        { label: '司机姓名', prop: 'ipaddr' },
        { label: '司机手机号', prop: 'ipaddr' },
        { label: '物料名称', prop: 'ipaddr' },
        { label: '对方毛重(吨)', prop: 'ipaddr' },
        { label: '对方净重(吨)', prop: 'ipaddr' },
        { label: '车型', prop: 'ipaddr' },
        { label: '是否集装箱', prop: 'ipaddr' },
        { label: '是否金典', prop: 'ipaddr' },
        { label: '置换类型', prop: 'ipaddr' },
        { label: '开卡单据', prop: 'ipaddr' },
        { label: '物流公司', prop: 'ipaddr' },
        { label: '创建时间', prop: 'ipaddr' },
        { label: '创建人', prop: 'ipaddr' },
        { label: '创建来源', prop: 'ipaddr' },
        {
          label: '操作',
          prop: 'action',
          fixed: 'right',
          type: 'button',
          width: 170,
          buttons: [
            {
              label: '查看',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: 'handleDetail'
            },
            {
              label: '删除',
              type: 'text',
              color: '#ee3333',
              method: 'handleDelete'
            }
          ]
        }
      ],
      tableColumn: [
        { label: '操作时间', prop: 'infoId' },

        { label: '操作人', prop: 'userName' },
        { label: '操作', prop: 'ipaddr' },
        { label: '操作事件', prop: 'infoId' }
      ],
      ruleRule: {
        auditStatus: [{ required: true, trigger: 'change', message: '必选' }]
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 复制按钮
    copyTaskNumber() {
      const taskNumber = this.detailParams.taskNumber
      if (taskNumber) {
        navigator.clipboard
          .writeText(taskNumber)
          .then(() => {
            this.$message.success('任务编号已复制到剪贴板！')
          })
          .catch((err) => {
            console.error('复制失败:', err)
            this.$message.error('复制失败，请重试！')
          })
      }
    },
    getStatusText(status) {
      switch (status) {
        case 1:
          return '待审核'
        case 2:
          return '执行中'
        case 3:
          return '已完成'
        case 4:
          return '已取消'
        case 5:
          return '已驳回'
        default:
          return '未知状态'
      }
    },
    getStatusStyle(status) {
      switch (status) {
        case 1:
          return {
            color: '#dca550',
            backgroundColor: '#eeeae5',
            padding: '2px 6px',
            borderRadius: '4px'
          }
        case 2:
          return {
            color: '#5a9cf8',
            backgroundColor: '#eef5fe',
            padding: '2px 6px',
            borderRadius: '4px'
          }
        case 3:
          return {
            color: '#7ec050',
            backgroundColor: '#e4ede5',
            padding: '2px 6px',
            borderRadius: '4px'
          }
        case 4:
          return {
            color: '#606266',
            backgroundColor: '#e6e8ec',
            padding: '2px 6px',
            borderRadius: '4px'
          }
        case 5:
          return {
            color: '#e47470',
            backgroundColor: '#eee5e8',
            padding: '2px 6px',
            borderRadius: '4px'
          }
        default:
          return { color: 'black', padding: '2px 6px', borderRadius: '4px' }
      }
    },
    /* 审核操作 start*/
    auditWay() {
      this.auditVisile = true
    },
    handleAuditSubmit() {
      const id = this.$route.params.id
      const auditData = {
        ids: [id],
        review: this.auditParams.auditStatus, // 审核类型
        illustrate: this.auditParams.auditText // 审核说明
      }
      beiGangApi.auditTransportPlan(auditData).then((res) => {
        if (res.code == 200) {
          this.$message.success('审核成功')
          this.auditVisile = false
          this.auditList = []
          this.auditParams = this.$options.data().auditParams
          this.getDetail()
        }
      })
    },
    handleAuditCancle() {
      this.auditParams = this.$options.data().auditParams
      this.resetForm('auditParams')
      this.auditVisile = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /* 审核操作 end*/

    /* 关联车辆 start*/
    setVehicle() {
      this.vehicleVisile = true
    },
    /* 关联车辆  end*/

    /* 编辑车辆  start*/
    update() {
      const currentId = this.$route.params.id
      this.$router.push({
        path: `/logistics/beiGang/transportUpdate/${currentId}`
      })
    },
    handleAddSubmit() {
      this.$refs.dictForm.validate((valid) => {
        if (valid) {
          console.log('handleAddSubmit 验证通过', this.dictModel)
          editDict(this.dictModel).then((res) => {
            if (!res.error) {
              console.log('editDict', res)

              this.$message.success('编辑成功')
              this.handleAddCancle()
              // 重新查询
              this.getDictList()
            }
          })
        } else {
          return false
        }
      })
    },
    handleAddCancle() {
      this.dictModel = this.$options.data().dictModel
      this.resetForm('dictForm')
      this.addVisile = false
    },
    /* 获取详情 */
    getDetail() {
      const id = this.$route.params.id
      beiGangApi.getTransportPlanDetail(id).then((res) => {
        if (res.code == 200) {
          this.detailParams = Object.assign(res.data, {})
          // 提取 materialBo 数据并设置 materialTableData
          const material = res.data.materialBo
          this.materialTableData = [
            {
              materialCode: material.materialCode,
              materialType: material.materialType,
              materialDescription: material.materialDescription,
              unit: material.unit,
              plannedQuantity: material.plannedQuantity,
              completedQuantity: res.data.completedQuantity,
              remainingQuantity: res.data.remainingQuantity
            }
          ]
        }
      })
      beiGangApi.getLogisticsBillDetail(id).then((res) => {
        if (res.code == 200 && res.data) {
          this.companyData = Array.isArray(res.data) ? res.data : [res.data]
        }
      })
      beiGangApi.getTransportBillDetail(id).then((res) => {
        if (res.code == 200 && res.data) {
          this.waybillTableData = Array.isArray(res.data) ? res.data : [res.data]
        }
      })
      beiGangApi.auditInfoList(1, id).then((res) => {
        if (res.code == 200 && res.data) {
          this.auditTableData = Array.isArray(res.data) ? res.data : [res.data]
        }
      })
    },
    // 完成操作
    accomplish() {
      this.accomplishVisile = true
    },
    handleAccomplishSubmit() {
      const id = this.$route.params.id
      const auditData = {
        ids: [id],
        review: 3 // 审核类型
      }
      beiGangApi.auditTransportPlan(auditData).then((res) => {
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.accomplishVisile = false
          this.auditList = []
          this.auditParams = this.$options.data().auditParams
        }
      })
    },
    handleAccomplishCancle() {
      this.accomplishVisile = false
    },
    //   删除车辆
    edit() {
      this.$confirm('确定删除吗', '取消', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        closeOnClickModal: false
      }).then(() => {
        //   console.log('确认');
        deleteFollow({ id: row.id }).then((res) => {
          if (!res.error) {
            this.$message.success('删除成功')
            this.getFollowList()
          }
        })
      })
    },
    // 查询关联车辆表格信息
    getlogisticsCompanyTableList() {
      const { pageSize } = this.$refs.logisticsCompanyTablePage
    },
    // 查询表格信息
    getTableList() {
      const { pageSize } = this.$refs.tablePage
    },
    tabHandleClick(tab, event) {
      console.log(tab, event)
    },
    logisticsCompanyHandleCurrentChange(v) {
      this.logisticsCompanyCurrentPage = v
      this.getlogisticsCompanyTableList()
    },
    logisticsCompanyHandleSizeChange(v) {
      this.pageSize = v
      this.logisticsCompanyCurrentPage = 1
      this.getlogisticsCompanyTableList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getTableList()
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getTableList()
    },
    handleSearchSubmit() {
      this.currentPage = 1
      this.getTableList()
    },
    handleSearchReset() {
      this.currentPage = 1
      this.$refs.tablePage.clearSelection()
      this.getTableList()
    }
  }
}
</script>

<style lang="scss" scoped>
.transportDetail {
  padding: 30px;

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .top_l {
      display: flex;

      .userinfo {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .taskNumber {
          font-size: 16px;
          font-weight: 700;
        }

        .taskStatus {
          margin-left: 10px;
          text-align: center;
        }
      }
    }
  }

  .bottom {
    .planData {
      display: flex;
      gap: 20px;

      .info {
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        height: 80px;
        background-color: #f5f7fa;

        .data {
          text-align: center;

          .text {
            margin-bottom: 5px;
            color: #9c9ea0;
          }

          .figure {
            font-size: 18px;
            color: #000;
          }
        }
      }
    }

    .waybillData {
      display: flex;
      gap: 20px;

      .info {
        display: flex;
        justify-content: space-around;
        align-items: center;

        &:nth-child(1) {
          flex-basis: 33.33%;
          flex-grow: 0;
        }

        &:nth-child(2) {
          flex-basis: auto;
          flex-grow: 1;
        }

        height: 80px;
        background-color: #f5f7fa;

        .data {
          text-align: center;

          .text {
            margin-bottom: 5px;
            color: #9c9ea0;
          }

          .figure {
            font-size: 18px;
            color: #000;
          }
        }
      }
    }

    .title {
      font-size: 18px;
      font-weight: 700;
    }
  }
}

.company {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #0076ff;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
  margin-right: 16px;

  .logo {
    width: 51px;
    height: 51px;
  }
}
</style>
